<template>
  <div class="cartcontrol" style="display: flex;align-items: center;height: 24px;">
    <transition name="move">
      <div class="cart-decrease" v-show="food.count>0" @click.stop.prevent="decreaseCart">
        <span class="inner" style="display: flex;align-items: center;">
					<icon name="remove-circle-outline" :scale="2"></icon>
				</span>
      </div>
    </transition>
    <div class="cart-count" v-show="food.count>0">{{food.count}}</div>
    <div class="cart-add" @click.stop.prevent="addCart" style="display: flex;align-items: center;">
			<icon name="add-circle-outline" :scale="2"></icon>
		</div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Vue from 'vue';
  export default {
    props: {
      food: {
        type: Object
      }
    },
    methods: {
      addCart(event) {
        if (!event._constructed) {
          return;
        }
        if (!this.food.count) {
          Vue.set(this.food, 'count', 1);
        } else {
          this.food.count++;
        }
        this.$emit('add', event.target);
      },
      decreaseCart(event) {
        if (!event._constructed) {
          return;
        }
        if (this.food.count) {
          this.food.count--;
        }
      }
    }
  };
</script>

<style lang="less" scoped>
  .cartcontrol {
	font-size: 0;
	.cart-decrease {
		display: inline-block;
		// padding: 6px;
		opacity: 1;
		transform: translate3d(0, 0, 0);
		.inner {
			display: inline-block;
			line-height: 24px;
			font-size: 24px;
			color: #00a0dc;
			transition: all 0.4s linear;
			transform: rotate(0);
		}
	}
	.cart-decrease.move-enter-active {
		transition: all 0.4s linear;
	}
	.cart-decrease.move-leave-active {
		transition: all 0.4s linear;
		opacity: 0;
		transform: translate3d(24px, 0, 0);
		.inner {
			transform: rotate(180deg);
		}
	}
	.cart-decrease.move-enter {
		opacity: 0;
		transform: translate3d(24px, 0, 0);
		.inner {
			transform: rotate(180deg);
		}
	}
	.cart-count {
		display: inline-block;
		vertical-align: top;
		width: 12px;
		margin: 0 6px;
		line-height: 24px;
		text-align: center;
		font-size: 10px;
		color: #93999f;
	}
	.cart-add {
		display: inline-block;
		// padding: 6px;
		line-height: 24px;
		font-size: 24px;
		color: #00a0dc;
	}
}
</style>
